/*
 * @Author: yxfan yxfan@streamax.com
 * @Date: 2022-06-12 09:32:02
 * @LastEditors: yxfan yxfan@streamax.com
 * @LastEditTime: 2022-06-12 15:52:46
 * @FilePath: /umi-demo/src/pages/demo/Canvas/index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from 'react';
export default function CanvasVideo() {
    const video = useRef();
    const canvas = useRef();
    const cnavas2 = useRef();
    const canPlay = useRef();
    useEffect(() => {
        console.log(video.current.videoWidth, video.current.videoHeight);
        video.current.onplay = () => {
            canPlay.current = true;
            window.requestAnimationFrame(renderCanvas1);
            window.requestAnimationFrame(renderCanvas2);
        };

        video.current.onpause = () => {
            canPlay.current = false;
        };
    }, []);
    function renderCanvas1() {
        var ctx = canvas.current.getContext('2d');
        ctx.drawImage(video.current, 0, 0, 400, 200);
        if (canPlay.current) {
            window.requestAnimationFrame(renderCanvas1);
        }
    }
    function renderCanvas2() {
        var ctx = cnavas2.current.getContext('2d');
        ctx.drawImage(canvas.current, 0, 0, 60, 60, 0, 0, 60 * 2, 60 * 2);
        if (canPlay.current) {
            window.requestAnimationFrame(renderCanvas2);
        }
    }
    // console.log(video.current)
    return (
        <div>
            <h2>canvas render video</h2>
            <canvas ref={canvas} id="myCanvas" width="400" height="200" style={{ border: '1px solid red' }}></canvas>
            <canvas ref={cnavas2} id="myCanvas" width="400" height="200" style={{ border: '1px solid red' }}></canvas>
            <video ref={video} height="400" width="700" controls src="https://zaha-main-1254037718.cos.ap-beijing.myqcloud.com/zaha.mp4" />
        </div>
    );
}
